<template>
  <div>
    <!-- 加上sync后页面选中显示的值会同步到data定义的值，类似于v-model -->
      <el-pagination
      :page-size.sync="pageSize"
      :page-sizes.sync="pageSizes"
      :current-page.sync="currentPage"
      :pager-count="pagerCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background 
        layout="sizes ,prev, pager, next,jumper,->,total"
        :total="50">
      </el-pagination>
  </div>
</template>

<script>
export default {
  name:"Pagination",
  methods:{
    handleSizeChange(size){
      alert(size)
    },
    handleCurrentChange(current){
      alert(current)
    }
  },
  data(){
    return{
      pageSize:10,
      pageSizes:[2,5,10,20,30],
      currentPage:3,
      // pagerCount:页码按钮的数量，当总页数超过改值时页码会折叠（默认是7）必须是5～21之间的奇数
      pagerCount:9
    }
  }
}
</script>

<style>

</style>